<template>
  <div class="campus-dashboard">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="dashboard-card" shadow="hover" @click.native="$router.push('/campus/application')">
          <div class="card-content">
            <i class="el-icon-document card-icon"></i>
            <div class="card-title">学生申请管理</div>
            <div class="card-description">管理学生的社团申请信息</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="dashboard-card" shadow="hover" @click.native="$router.push('/campus/recruitment')">
          <div class="card-content">
            <i class="el-icon-user card-icon"></i>
            <div class="card-title">社团招新管理</div>
            <div class="card-description">发布和管理社团招新信息</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="dashboard-card" shadow="hover" @click.native="$router.push('/campus/interviewSlot')">
          <div class="card-content">
            <i class="el-icon-time card-icon"></i>
            <div class="card-title">面试时段管理</div>
            <div class="card-description">设置和管理面试时间安排</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="dashboard-card" shadow="hover" @click.native="$router.push('/campus/appointment')">
          <div class="card-content">
            <i class="el-icon-date card-icon"></i>
            <div class="card-title">面试预约管理</div>
            <div class="card-description">管理学生面试预约信息</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="6">
        <el-card class="dashboard-card" shadow="hover" @click.native="$router.push('/campus/matchingRecord')">
          <div class="card-content">
            <i class="el-icon-connection card-icon"></i>
            <div class="card-title">智能匹配管理</div>
            <div class="card-description">查看和管理智能匹配结果</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card header="系统概览">
          <div class="overview-content">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="overview-item">
                  <div class="overview-number">{{ statistics.totalApplications }}</div>
                  <div class="overview-label">总申请数</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="overview-item">
                  <div class="overview-number">{{ statistics.totalRecruitments }}</div>
                  <div class="overview-label">总招新数</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="overview-item">
                  <div class="overview-number">{{ statistics.totalAppointments }}</div>
                  <div class="overview-label">总预约数</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "CampusDashboard",
  data() {
    return {
      statistics: {
        totalApplications: 0,
        totalRecruitments: 0,
        totalAppointments: 0
      }
    };
  },
  created() {
    this.loadStatistics();
  },
  methods: {
    loadStatistics() {
      // 这里应该调用API获取统计数据，临时使用模拟数据
      this.statistics = {
        totalApplications: 156,
        totalRecruitments: 23,
        totalAppointments: 89
      };
    }
  }
};
</script>

<style scoped>
.campus-dashboard {
  padding: 20px;
}

.dashboard-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

.dashboard-card:hover {
  transform: translateY(-5px);
}

.card-content {
  text-align: center;
  padding: 20px;
}

.card-icon {
  font-size: 48px;
  color: #409EFF;
  margin-bottom: 15px;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 10px;
}

.card-description {
  font-size: 14px;
  color: #909399;
  line-height: 1.4;
}

.overview-content {
  padding: 20px 0;
}

.overview-item {
  text-align: center;
}

.overview-number {
  font-size: 36px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 8px;
}

.overview-label {
  font-size: 14px;
  color: #606266;
}
</style>